<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据分析</title>

  <link rel="stylesheet" href="/fission/css/iconfont.css">
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/fission/css/common.css">
  <link rel="stylesheet" href="/fission/css/index.css">
  <link rel="stylesheet" href="/hyqcss/public.css">
</head>
<body style="background: #e9e9e9;">
<!-- 顶部提示框 开始 -->
	<div class="public_tipSetting_contaienr">
		<div class="public_tipSetting_content">
			<p>进群宝功能可以一定程度上实现群裂变效果，本功能使用时需借助企业微信官方后台的群欢迎语+群机器人+群活码功能，详见教程。</p>
			<a href="https://support.qq.com/products/174823/faqs/84591" target="_blank">查看教程</a>
			<svg id="closeTips" t="1599462804099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8813" width="15" height="15"><path d="M512 102.4a409.6 409.6 0 1 0 409.6 409.6 409.6 409.6 0 0 0-409.6-409.6z m181.248 518.144a51.2 51.2 0 0 1-72.704 72.704L512 584.192l-108.544 109.056a51.2 51.2 0 0 1-72.704-72.704L439.808 512 330.752 403.456a51.2 51.2 0 0 1 72.704-72.704L512 439.808l108.544-109.056a51.2 51.2 0 0 1 72.704 72.704L584.192 512z" fill="" p-id="8814"></path></svg>
		</div>
	</div>
	<!-- 顶部提示框 结束 -->
  <div style="margin-top: 0;" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="public-header-nav">
      <li><a class="public-header-nav-active" href="mission_list.html">任务列表</a></li>
      <!-- <li><a href="mission_statistics.html">数据分析</a></li> -->
    </ul>
    <div class="layui-tab-content" style="padding: 10px 16px;">
      <!-- 任务列表 Tab -->
      <div class="layui-tab-item layui-show">
        <div>
          <a href="create_mission.html" class="layui-btn layui-btn-normal">新建活动</a>
        </div>
        <section class="public-container missions-container" style="margin: 0">
          <!-- 静态数据型 表格 -->
          <table class="layui-table" lay-skin="line" style="margin-bottom: 0;">
            <colgroup>
              <col>
              <col width="200">
              <col width="150">
              <col width="200">
            </colgroup>
            <thead>
              <tr>
                <th>活动名称</th>
                <th>创建时间</th>
                <th>活动状态</th>
                <th>操作</th>
              </tr> 
            </thead>
            <tbody>
			{loop $res as $r}
				<tr>
				<td>{$r->name}</td>
			
				<!-- <td>{$r->allCustomer}</td> -->
				<td>{$r->ctime}</td>
				<td>进行中</td>
				<td>
                  <!-- <a {if time() > $r->end_time}href="javascript::void(0)"{else}href="invitation-{$r->id}.html"{/if} class="table-btn" lay-event="invitation">邀请客户参与</a>
                  <div class="divider-vertical"></div> -->
                  <!--<a  href="http://{$_SERVER['HTTP_HOST']}/pub/inqunbao/{$r->name}{$r->id}.png" download="{$r->name}" class="layui-btn layui-btn-sm layui-btn-normal">下载海报</a>-->
                  <a href="create_mission-{$r->id}.html" class="table-btn" lay-event="edit" style="margin-right: 15px;">修改</a>
                  <a class="table-btn" onclick="del_mission({$r->id})" style="margin-right: 15px;">删除</a>
        </td>
				</tr>
			{/loop}
   
            </tbody>
          </table>
        </section>
		<div class="main-container-h pageing-container-h" style="background: #fff;">
		        <div class="pageing-content-h">
		           <span>{$p->totalnum}条/{$p->totalpage}页</span> 
		        </div>
				<ul class="pageing-content-h">
		           {P weidogsadmin}
				</ul>
		    </div>
      </div>
      <!-- 数据分析 Tab -->
      <div class="layui-tab-item">
        <form style="margin: 5px 20px;" class="layui-form">
          <div class="layui-inline">
            <label style="width: auto;padding-left: 0;" class="layui-form-label">当前活动：</label>
            <div class="layui-input-inline">
              <select name="mission" lay-search="" lay-filter="mission">
			    {loop $missionArr as $id=>$name}
					<option value="{$id}">{$name}</option>
				{/loop}
                <!---<option value="">直接选择或搜索选择</option>
                <option value="1">layer</option>
                <option value="2">form</option>
                <option value="3">layim</option>
                <option value="4">element</option>-->
              </select>
            </div>
            <span class="layui-badge layui-bg-green" id="missionStatus">{if time() > $missionFirst->end_time}活动已结束{else}活动进行中{/if}</span>
          </div>
        </form>
      
        <section style="padding: 20px;" class="public-container">
          <section class="flex align-items-center data-sum">
            <div class="flex-1 flex flex-column justify-center align-items-center data-sum-item">
              <p class="data-sum-value" id="allCustomer">{$allCustomer}</p>
              <p>邀请客户总数</p>
            </div>
            <div class="divider-vertical"></div>
            <div class="flex-1 flex flex-column justify-center align-items-center data-sum-item">
              <p class="data-sum-value" id="newCustomer">{$newCustomer}</p>
              <p>邀请新客户总数</p>
            </div>
            <div class="divider-vertical"></div>
            <div class="flex-1 flex flex-column justify-center align-items-center data-sum-item">
              <p class="data-sum-value" id="lossCustomer">{$lossCustomer}</p>
              <p>流失客户数</p>
            </div>
            <div class="divider-vertical"></div>
            <div class="flex-1 flex flex-column justify-center align-items-center data-sum-item">
              <p class="data-sum-value" id="growthCustomer">{$allCustomer - $lossCustomer}</p>
              <p>净增客户总数</p>
            </div>
            <div class="divider-vertical"></div>
            <div class="flex-1 flex flex-column justify-center align-items-center data-sum-item">
              <p class="data-sum-value" id="todayCustomer">{$todayCustomer}</p>
              <p>今日新增客户数</p>
            </div>
          </section>
      
          <div class="refresh-box">
            <strong id="allCustomers">共{$allCustomer}个客户</strong>
            <div style="margin: 0 10px;" class="divider-vertical"></div>
            <!--<span style="font-size: 12px;color: rgba(0,0,0,.45);cursor: pointer;">
              <i style="font-size: 12px;" class="layui-icon layui-icon-refresh"></i> 更新数据
            </span>-->
          </div>
      
          <form action="" class="layui-form">
            <div class="layui-form-item">
              <!--<div class="layui-inline">
                <label class="layui-form-label">搜索用户：</label>
                <div class="layui-input-inline">
                  <input type="text" name="user" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">所属成员：</label>
                <div class="layui-input-inline">
                  <select name="service" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option value="1">layer</option>
                    <option value="2">form</option>
                    <option value="3">layim</option>
                    <option value="4">element</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">添加时间：</label>
                <div style="width: 230px;" class="layui-input-inline">
                  <input style="text-align: center;" type="text" class="layui-input" id="addTime" placeholder="开始日期 - 结束日期">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">完成状态：</label>
                <div class="layui-input-inline">
                  <select name="completeStatus" id="completeStatus" lay-filter="completeStatus">
                    <option value=""></option>
                    <option value="0">已完成</option>
                    <option value="1">未完成</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">流失状态：</label>
                <div class="layui-input-inline">
                  <select name="lostStatus" id="lostStatus" lay-filter="lostStatus">
                    <option value="">请选择流失状态</option>
                    <option value="0">已流失</option>
                    <option value="1">未流失</option>
                  </select>
                </div>
              </div>-->
              <!--<div style="float: right;" class="layui-inline">
                <button class="layui-btn layui-btn-primary">重置</button>
              </div>-->
            </div>
          </form>
      
          <!-- 静态数据型 表格 -->
          <table class="layui-table">
            <colgroup>
              <col>
              <col>
              <col>
              <col width="120">
              <col width="120">
              <col width="120">
              <col width="170">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>客户</th>
                <th>所属成员</th>
                <th>添加时间</th>
                <th>流失状态</th>
                <th>完成情况</th>
                <th>邀请好友数</th>
                <th>操作</th>
              </tr> 
            </thead>
            <tbody id="showfuser">
			{loop $fusers as $fuser}
				<tr>
                <td>
                  <div class="client-avatar">
                    <img src="{$fuser->bind_user->avatar}" alt="">
                  </div>
                  <span style="float: left;">{$fuser->bind_user->name}
                    <!--<span class="wx">@微信</span>-->
                  </span>
                </td>
                <td>
                  <div class="service-card">
                    <i class="iconfont icon-person"></i>{$h->get_user_by_userid($fuser->wid,$fuser->bind_user->userid)['name']}
                  </div>
                </td>
                <td>{date('Y-m-d H:i:s',$fuser->ctime)}</td>
                <td>{$fuser->bind_user->status?'正常':'流失'}</td>
                <td>{$fuser->finishStatus}</td>
                <td>{$fuser->successCount}</td>
                <td>
                  <a class="table-btn" lay-event="client" onclick="etInto({$fuser->wid},'{$fuser->bind_user->external_userid}')">客户详情</a>
                  <div class="divider-vertical"></div>
                  <a onclick="yqInfo({$fuser->fid},{$fuser->id})" class="table-btn" lay-event="invitation">邀请详情</a>
                </td>
              </tr>
			{/loop}

            </tbody>
          </table>
      
          <!-- 网络请求 型 表格 -->
          <!--<table class="layui-hide" id="analysisTable"></table>-->
          <script type="text/html" id="analysisTableClient">
            <div class="client-avatar">
              <img src="http://wx.qlogo.cn/mmhead/2hnvQgcmtJCZkny1ibV4MQwGC6PtXU2bHrQSzJJLo57U/64" alt="">
            </div>
            <span style="float: left;">{ { d.name}}
              <span class="wx">@微信</span>
            </span>
          </script>
          <script type="text/html" id="analysisTableService">
            <div class="service-card">
              <i class="iconfont icon-person"></i>李某
            </div>
          </script>
          <script type="text/html" id="analysisTableOperation">
            <a class="table-btn" lay-event="client">客户详情</a>
            <div class="divider-vertical"></div>
            <a class="table-btn" lay-event="invitation">邀请详情</a>
          </script>
        </section>
      </div>
    </div>
  </div>

  <!-- 详情面板 -->
  <div hidden style="display: none;" id="missionDetailsModel">
    <section class="flex mission-details">
      <div class="mission-details-left">
        <img id="qr_code" src="" alt="">
        <p id="name">123</p>
        <div style="margin-bottom: 10px;">
          <a id="download_qrcode" target="_blank" href="" class="layui-btn layui-btn-sm layui-btn-normal">下载活码</a>
        </div>
        <!--<a href="#" class="layui-btn layui-btn-sm layui-btn-primary">修改</a>-->
      </div>
      <div class="flex-1 flex flex-column mission-details-right">
        <div class="mission-dr-inner">
          <div class="detail-item-title flex justify-start">
            <span class="item-title">
              邀请链接：
              <span class="tooltip" data-content="可复制该链接邀请用户参与裂变宝活动">
                <i class="iconfont icon-hint"></i>
              </span>
            </span>
            <div class="flex-1">
              <div class="flex link-box">
                <p class="flex-1 link" id="yq_link_show"></p>
                <button id="yq_link" data-clipboard-text="" class="layui-btn layui-btn-xs layui-btn-normal detailsCopy">复制</button>
              </div>
              <p class="tip">提示：因企业微信限制，如果客户修改了微信昵称，可能无法通过邀请链接参与活动</p>
            </div>
          </div>
          <div class="detail-item-title">
            <span class="item-title">活动时间：</span>
            <span class="date" id="dateshow"></span>
          </div>
          <div class="detail-item-title flex">
            <span class="item-title">使用成员：</span>
            <ul class="owner-list" id="usershow">
   
            </ul>
          </div>
          <div class="detail-item-title" id="tagshow">
            <span class="item-title">客户标签：</span>
            <!--<span class="layui-badge layui-bg-blue">Hot</span>-->
          </div>
          <div class="detail-item-title">
            <span class="item-title">欢迎语1：</span>
            <span id="hy_text">
            </span>
          </div>
          <div class="detail-item-title flex justify-start">
            <span class="item-title">欢迎语链接：</span>
            <div class="welcome-link">
              <p class="title" id="hy_link_title"></p>
              <div class="flex">
                <span class="flex-1" id="hy_link_desc"></span>
                <img id="hy_link_picurl" src="" class="cover">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script src="/fission/js/jquery.min.js"></script>
  <script src="/fission/js/layui.all.js"></script>
  <script src="/fission/js/clipboard.min.js"></script>
  <script src="/fission/js/common.js"></script>
  <script src="/js/ajax.js"></script>
  <script type="text/javascript">
    $("#closeTips").click(function(){
      $('.public_tipSetting_contaienr').hide();
    })
  </script>
  <script>
	layui.use('form', function(){
	  var form = layui.form;
	  //各种基于事件的操作
	  form.on('select(mission)', function(data){
		  console.log(data.elem); //得到select原始DOM对象
		  //alert(data.value); //得到被选中的值
		  myAjaxPost(false, true, 'get_mission_statistics.html', { missionid:data.value}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#missionStatus').html(data.missionStatus);
					$('#allCustomer').html(data.allCustomer);
					$('#allCustomers').html('共'+data.allCustomer+'个客户');
					$('#newCustomer').html(data.newCustomer);
					$('#lossCustomer').html(data.lossCustomer);
					$('#growthCustomer').html(data.growthCustomer);
					$('#todayCustomer').html(data.todayCustomer);
					$('#completeStatus option:first').prop("selected","selected");
					$('#lostStatus option:first').prop("selected","selected");
					form.render('select');
					
					var fusers = data.fusers?data.fusers:[];
					showfuser(fusers);
				}else{
					alert(resp.msg);
				}
		  });
	  }); 
	  form.on('select(completeStatus)', function(data){
		  var completeStatus = data.value;
		  var lostStatus = $('#lostStatus').val();
	  });  
	  form.on('select(lostStatus)', function(data){
		  var lostStatus = data.value;
		  var completeStatus = $('#completeStatus').val();
	  });
	});
	function showfuser(fusers){
		$('#showfuser').empty();
		var html = '';
		for(i = 0; i < fusers.length; i++){
			html += '<tr>';
			html += '<td>';
			html += '<div class="client-avatar">';
			html += '<img src="'+fusers[i].bind_user.avatar+'" alt="">';
			html += '</div>';
			html += '<span style="float: left;">'+fusers[i].bind_user.name;
			html += '</span>';
			html += '</td>';
			html += '<td>';
			html += '<div class="service-card">';
			html += '<i class="iconfont icon-person"></i>'+fusers[i].qy_user.name;
			html += '</div>';
			html += '</td>';
			html += '<td>'+fusers[i].ctime+'</td>';
			var bustatus = fusers[i].bind_user.status == 1?"正常":"流失";
			html += '<td>'+ bustatus +'</td>';
			html += '<td>'+fusers[i].finishStatus+'</td>';
			html += '<td>'+fusers[i].successCount+'</td>';
			html += '<td>';
			html += '<a class="table-btn" lay-event="client" onclick="etInto('+fusers[i].wid+','+"'"+fusers[i].bind_user.external_userid+"'"+')">客户详情</a>';
			html += '<div class="divider-vertical"></div>';
			html += '<a onclick="yqInfo('+fusers[i].fid+','+fusers[i].id+')" class="table-btn" lay-event="invitation">邀请详情</a>';
			html += '</td></tr>';
		}
		$('#showfuser').append(html);
	}
  </script>
  <script type="text/javascript">
		function etInto(wid,etUserid){
			myAjaxPost(false, true, 'get_et_id.html', { wid:wid,etUserid:etUserid}, function (resp) {
				if (resp.status == 'success') {
					window.location.href ='/Addons/QyWechat/Admin/Externalcontact/customer_info-'+resp.data+'.html';
				}
			});
		}
		
		function yqInfo(fid,pid){
			layer.open({
				type: 2,
				title: '邀请详情',
				shadeClose: true,
				shade: 0.2,
				area: ['700px', '400px'],
				content: 'get_help_user_statistics-'+fid+'-'+pid+'.html'
			});
		}
		
		function del_mission(id){
			if(confirm('确定删除吗？')){
				myAjaxPost(false, true, 'del_mission.html', { id:id}, function (resp) {
						if (resp.status == 'success') {
							tusi(resp.msg);
							setTimeout(function(){
								location.href = 'mission_list.html';
							},500);
						}else{
							alert(resp.msg);
						}
					});
			}
		}
	</script>
  <script>
    layui.use('laydate', function(){
      var laydate = layui.laydate;

      // 邀请日期范围
      laydate.render({
        elem: '#addTime'
        ,range: true
      });
    })

    layui.use('table', function(){
      var table = layui.table;
      
      table.render({
        elem: '#analysisTable'
        ,url: '/demo/table/user/'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
          { field:'id', title: '客户', templet: '#analysisTableClient'}
          ,{ field:'username', title: '所属成员', templet: '#analysisTableService'}
          ,{ field:'sex', title: '添加时间'}
          ,{ field:'city', width:120, title: '流失状态'}
          ,{ field:'sign', title: '完成情况', width: 120, minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{ field:'experience', width: 120, title: '邀请好友数'}
          ,{ field:'score', width: 170, title: '操作', toolbar: '#analysisTableOperation'}
        ]]
        ,page: true
      });
    });

    // 任务详情
    layui.$('.missions-container').on('click', '.table-btn-details', function() {
      var id = layui.$(this).data('id');
      //console.log(id);
      //console.log(layui.$(this).data('others'));
	  myAjaxPost(false, true, 'get_mission_detail.html', { id:id}, function (resp) {
			if (resp.status == 'success') {
				var data = resp.data;
				$('#qr_code').attr('src',data.qr_code);
				$('#name').html(data.name);
				$('#download_qrcode').attr('href','download_qrcode-'+data.id+'.html');
				$('#yq_link_show').html(data.activityurl);
				$('#yq_link').attr("data-clipboard-text",data.activityurl);
				$('#dateshow').html(data.ctime+' - '+data.end_time);
				$('#usershow').empty();
				var userhtml = '';
				for (var i = 0; i < data.users.length; i++) {
					userhtml += '<li class="owner">';
					userhtml += '<section class="avatar">';
					userhtml += '<img src="'+data.users[i].avatar+'" class="avatar-img">';
					userhtml += '</section>'+data.users[i].name;
					userhtml += '</li>';
				}
				$('#usershow').append(userhtml);
				var tagshow = '';
				for(var i = 0; i < data.select_label.length; i++){
					tagshow += '<span class="layui-badge layui-bg-blue">'+data.select_label[i]+'</span>';
				}
				$('#tagshow').append(tagshow);
				$('#hy_text').html(data.hy_text_content);
				$('#hy_link_title').html(data.hy_link_title);
				$('#hy_link_desc').html(data.hy_link_desc);
				$('#hy_link_picurl').attr('src',data.hy_link_picurl);
				lookDetails(id);
			}else{
				alert(resp.msg);
			}
	  });
    });
    function lookDetails(id) {
      layer.open({
        type: 1
        ,title: '活动详情'
        ,closeBtn: true
        ,area: '688px'
        ,id: 'missionDetails' //设定一个id，防止重复弹出
        ,content: layui.$('#missionDetailsModel')
        ,success: function(layero){
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({
            href: 'http://www.layui.com/'
            ,target: '_blank'
          });
        }
      })
    }

    // 任务-删除
    layui.$('.missions-container').on('click', '.table-btn-delete', function() {
      var id = layui.$(this).data('id');
      console.log(id);
      deleteMission(id)
    });
    function deleteMission(id) {
      layer.confirm('确定要删除该任务吗？', { icon: 7, title:'提示'}, function(index) {
        // confirm do something
        layer.close(index);
      });
    }

    // 初始化复制功能
    var detailsLinkClip = new ClipboardJS('.detailsCopy');
    detailsLinkClip.on('success', function() {
      layer.msg('复制成功', { icon: 1});
    })
    detailsLinkClip.on('error', function() {
      // layer.msg('复制失败', { icon: 2});
    })
    
  </script>
  <script>
		$(document).ready(function (){
            myAjaxPost(false, false, 'del_expire_mission.html', { }, function (resp) {
				if (resp.status == 'success') {
					
				}
			});
        });
  </script>
</body>
</html>